import React, { useRef, useState } from 'react';
import { useFrame, useThree } from '@react-three/fiber';
import { Text, Box, Sphere, Cylinder, Cone, Plane, RoundedBox } from '@react-three/drei';
import type { DatingProfile } from '../types';
import * as THREE from 'three';

interface CommercialMaleCharacterProps {
  profile: DatingProfile;
  position: [number, number, number];
  rotation?: [number, number, number];
  onClick: () => void;
  scale?: number;
  isSeated?: boolean;
}

export const CommercialMaleCharacter3D: React.FC<CommercialMaleCharacterProps> = ({
  profile,
  position,
  rotation = [0, 0, 0],
  onClick,
  scale = 1,
  isSeated = false
}) => {
  const characterRef = useRef<THREE.Group>(null);
  const [hovered, setHovered] = useState(false);
  const [clicked, setClicked] = useState(false);
  const { camera } = useThree();

  // 精细动画系统
  useFrame((state) => {
    if (characterRef.current) {
      // 微妙的呼吸动画
      const breathIntensity = hovered ? 0.02 : 0.008;
      const breathScale = 1 + Math.sin(state.clock.elapsedTime * 1.2) * breathIntensity;
      characterRef.current.scale.set(scale * breathScale, scale * breathScale, scale * breathScale);
      
      // 坐着时的微微摇摆
      if (isSeated) {
        characterRef.current.rotation.z = Math.sin(state.clock.elapsedTime * 0.3) * 0.02;
      }
      
      // 悬停时面向摄像机
      if (hovered && camera) {
        const lookAtTarget = new THREE.Vector3().copy(camera.position);
        lookAtTarget.y = characterRef.current.position.y + 1; // 看向摄像机位置
        characterRef.current.lookAt(lookAtTarget);
      }
    }
  });

  const handleClick = () => {
    setClicked(true);
    setTimeout(() => setClicked(false), 300);
    onClick();
  };

  const handlePointerOver = () => {
    setHovered(true);
    document.body.style.cursor = 'pointer';
  };

  const handlePointerOut = () => {
    setHovered(false);
    document.body.style.cursor = 'default';
  };

  // 商业级配色方案
  const colorScheme = {
    skin: '#F4C2A1',
    hair: '#3D2914',
    shirt: '#2C5282',
    pants: '#2D3748',
    shoes: '#1A202C',
    tie: '#B91C1C',
    watch: '#374151',
    metal: '#9CA3AF',
    accent: '#3B82F6'
  };

  // 坐姿调整
  const sittingOffset = isSeated ? -0.2 : 0;
  
  return (
    <group 
      ref={characterRef}
      position={position}
      rotation={rotation}
      onClick={handleClick}
      onPointerOver={handlePointerOver}
      onPointerOut={handlePointerOut}
    >
      {/* ========== 身体主体结构 ========== */}
      
      {/* 躯干 - 更真实的体型 */}
      <group position={[0, 0.65 + sittingOffset, 0]}>
        {/* 胸部 - 宽肩膀 */}
        <RoundedBox position={[0, 0.15, 0]} args={[0.5, 0.35, 0.25]} radius={0.02} castShadow>
          <meshStandardMaterial color={colorScheme.shirt} roughness={0.7} metalness={0.1} />
        </RoundedBox>
        
        {/* 腰部 */}
        <RoundedBox position={[0, -0.15, 0]} args={[0.42, 0.28, 0.22]} radius={0.02} castShadow>
          <meshStandardMaterial color={colorScheme.shirt} roughness={0.7} metalness={0.1} />
        </RoundedBox>
        
        {/* 衬衫领子 */}
        <Box position={[0, 0.25, 0.13]} args={[0.35, 0.15, 0.02]} castShadow>
          <meshStandardMaterial color="#FFFFFF" roughness={0.4} />
        </Box>
        
        {/* 领带 - 更精致 */}
        <group position={[0, 0.05, 0.13]}>
          <Box args={[0.08, 0.4, 0.015]} castShadow>
            <meshStandardMaterial color={colorScheme.tie} roughness={0.6} />
          </Box>
          {/* 领带结 */}
          <Box position={[0, 0.18, 0.005]} args={[0.12, 0.06, 0.025]} castShadow>
            <meshStandardMaterial color={colorScheme.tie} roughness={0.6} />
          </Box>
        </group>
      </group>

      {/* ========== 手臂系统 ========== */}
      
      {/* 左臂 - 分段建模 */}
      <group>
        {/* 上臂 */}
        <Cylinder
          position={[-0.38, 0.75 + sittingOffset, 0]}
          args={[0.07, 0.08, 0.35]}
          rotation={[0, 0, isSeated ? 0.3 : 0.1]}
          castShadow
        >
          <meshStandardMaterial color={colorScheme.shirt} />
        </Cylinder>
        
        {/* 前臂 */}
        <Cylinder
          position={[-0.5, 0.45 + sittingOffset, isSeated ? 0.1 : 0]}
          args={[0.06, 0.07, 0.3]}
          rotation={[0, 0, isSeated ? -0.2 : 0.05]}
          castShadow
        >
          <meshStandardMaterial color="#FFFFFF" /> {/* 卷起袖子 */}
        </Cylinder>
        
        {/* 左手 */}
        <Sphere 
          position={[-0.58, 0.28 + sittingOffset, isSeated ? 0.15 : 0]} 
          args={[0.08]} 
          castShadow
        >
          <meshStandardMaterial color={colorScheme.skin} roughness={0.8} />
        </Sphere>
      </group>

      {/* 右臂 - 对称但有变化 */}
      <group>
        {/* 上臂 */}
        <Cylinder
          position={[0.38, 0.75 + sittingOffset, 0]}
          args={[0.07, 0.08, 0.35]}
          rotation={[0, 0, isSeated ? -0.3 : -0.1]}
          castShadow
        >
          <meshStandardMaterial color={colorScheme.shirt} />
        </Cylinder>
        
        {/* 前臂 */}
        <Cylinder
          position={[0.5, 0.45 + sittingOffset, isSeated ? 0.1 : 0]}
          args={[0.06, 0.07, 0.3]}
          rotation={[0, 0, isSeated ? 0.2 : -0.05]}
          castShadow
        >
          <meshStandardMaterial color="#FFFFFF" />
        </Cylinder>
        
        {/* 右手 + 手表 */}
        <group position={[0.58, 0.28 + sittingOffset, isSeated ? 0.15 : 0]}>
          <Sphere args={[0.08]} castShadow>
            <meshStandardMaterial color={colorScheme.skin} roughness={0.8} />
          </Sphere>
          {/* 精致手表 */}
          <Cylinder position={[0, 0.05, 0]} args={[0.06, 0.06, 0.03]} rotation={[Math.PI/2, 0, 0]} castShadow>
            <meshStandardMaterial color={colorScheme.watch} metalness={0.8} roughness={0.2} />
          </Cylinder>
          <Cylinder position={[0, 0.05, 0]} args={[0.04, 0.04, 0.01]} rotation={[Math.PI/2, 0, 0]}>
            <meshStandardMaterial color="#000000" />
          </Cylinder>
        </group>
      </group>

      {/* ========== 腿部系统 ========== */}
      
      {/* 大腿 */}
      <group>
        <Cylinder
          position={[-0.12, isSeated ? 0.25 : 0.2, isSeated ? 0.05 : 0]}
          args={[0.09, 0.1, isSeated ? 0.35 : 0.4]}
          rotation={isSeated ? [0.4, 0, 0] : [0, 0, 0]}
          castShadow
        >
          <meshStandardMaterial color={colorScheme.pants} />
        </Cylinder>
        
        <Cylinder
          position={[0.12, isSeated ? 0.25 : 0.2, isSeated ? 0.05 : 0]}
          args={[0.09, 0.1, isSeated ? 0.35 : 0.4]}
          rotation={isSeated ? [0.4, 0, 0] : [0, 0, 0]}
          castShadow
        >
          <meshStandardMaterial color={colorScheme.pants} />
        </Cylinder>
      </group>

      {/* 小腿 - 只有站立时显示 */}
      {!isSeated && (
        <group>
          <Cylinder
            position={[-0.12, 0.1, 0]}
            args={[0.07, 0.08, 0.2]}
            castShadow
          >
            <meshStandardMaterial color={colorScheme.pants} />
          </Cylinder>
          
          <Cylinder
            position={[0.12, 0.1, 0]}
            args={[0.07, 0.08, 0.2]}
            castShadow
          >
            <meshStandardMaterial color={colorScheme.pants} />
          </Cylinder>
        </group>
      )}

      {/* 脚部 - 只有站立时显示 */}
      {!isSeated && (
        <group>
          <RoundedBox
            position={[-0.12, 0.04, 0.08]}
            args={[0.16, 0.08, 0.28]}
            radius={0.02}
            castShadow
          >
            <meshStandardMaterial color={colorScheme.shoes} metalness={0.3} roughness={0.8} />
          </RoundedBox>
          
          <RoundedBox
            position={[0.12, 0.04, 0.08]}
            args={[0.16, 0.08, 0.28]}
            radius={0.02}
            castShadow
          >
            <meshStandardMaterial color={colorScheme.shoes} metalness={0.3} roughness={0.8} />
          </RoundedBox>
        </group>
      )}

      {/* ========== 头部详细建模 ========== */}
      
      {/* 头部基础形状 - 更真实的比例 */}
      <Sphere
        position={[0, 1.1 + sittingOffset, 0]}
        args={[0.16, 16, 16]}
        castShadow
      >
        <meshStandardMaterial color={colorScheme.skin} roughness={0.8} metalness={0.0} />
      </Sphere>

      {/* 发型 - 分层建模 */}
      <group position={[0, 1.1 + sittingOffset, 0]}>
        {/* 主发型 */}
        <Sphere position={[0, 0.08, -0.06]} args={[0.17, 16, 16]} castShadow>
          <meshStandardMaterial color={colorScheme.hair} roughness={0.9} />
        </Sphere>
        
        {/* 侧边头发 */}
        <Sphere position={[-0.12, 0.05, -0.1]} args={[0.1, 12, 12]} castShadow>
          <meshStandardMaterial color={colorScheme.hair} roughness={0.9} />
        </Sphere>
        <Sphere position={[0.12, 0.05, -0.1]} args={[0.1, 12, 12]} castShadow>
          <meshStandardMaterial color={colorScheme.hair} roughness={0.9} />
        </Sphere>
        
        {/* 刘海 */}
        <Box position={[0, 0.14, 0.08]} args={[0.28, 0.06, 0.06]} castShadow>
          <meshStandardMaterial color={colorScheme.hair} roughness={0.9} />
        </Box>
      </group>

      {/* ========== 精细面部特征 ========== */}
      
      {/* 眼睛 - 更立体 */}
      <group position={[0, 1.1 + sittingOffset, 0]}>
        {/* 眼窝 */}
        <Sphere position={[-0.06, 0.02, 0.14]} args={[0.02, 8, 8]}>
          <meshStandardMaterial color="#FFFFFF" />
        </Sphere>
        <Sphere position={[0.06, 0.02, 0.14]} args={[0.02, 8, 8]}>
          <meshStandardMaterial color="#FFFFFF" />
        </Sphere>
        
        {/* 瞳孔 */}
        <Sphere position={[-0.06, 0.02, 0.155]} args={[0.012, 8, 8]}>
          <meshStandardMaterial color="#2D1B07" />
        </Sphere>
        <Sphere position={[0.06, 0.02, 0.155]} args={[0.012, 8, 8]}>
          <meshStandardMaterial color="#2D1B07" />
        </Sphere>
        
        {/* 高光 */}
        <Sphere position={[-0.055, 0.025, 0.16]} args={[0.005, 6, 6]}>
          <meshBasicMaterial color="#FFFFFF" />
        </Sphere>
        <Sphere position={[0.065, 0.025, 0.16]} args={[0.005, 6, 6]}>
          <meshBasicMaterial color="#FFFFFF" />
        </Sphere>
      </group>

      {/* 眉毛 - 立体建模 */}
      <group position={[0, 1.1 + sittingOffset, 0]}>
        <Box position={[-0.06, 0.06, 0.14]} args={[0.035, 0.008, 0.008]} castShadow>
          <meshStandardMaterial color={colorScheme.hair} />
        </Box>
        <Box position={[0.06, 0.06, 0.14]} args={[0.035, 0.008, 0.008]} castShadow>
          <meshStandardMaterial color={colorScheme.hair} />
        </Box>
      </group>

      {/* 鼻子 - 更精细 */}
      <group position={[0, 1.1 + sittingOffset, 0]}>
        <Box position={[0, -0.02, 0.15]} args={[0.02, 0.04, 0.02]} castShadow>
          <meshStandardMaterial color={colorScheme.skin} />
        </Box>
        {/* 鼻孔 */}
        <Sphere position={[-0.008, -0.035, 0.155]} args={[0.003, 6, 6]}>
          <meshStandardMaterial color="#8B4513" />
        </Sphere>
        <Sphere position={[0.008, -0.035, 0.155]} args={[0.003, 6, 6]}>
          <meshStandardMaterial color="#8B4513" />
        </Sphere>
      </group>

      {/* 嘴部 - 更真实 */}
      <group position={[0, 1.1 + sittingOffset, 0]}>
        <Box position={[0, -0.08, 0.145]} args={[0.05, 0.012, 0.008]} castShadow>
          <meshStandardMaterial color="#CD853F" />
        </Box>
        {/* 牙齿暗示 */}
        <Box position={[0, -0.08, 0.15]} args={[0.04, 0.006, 0.003]}>
          <meshStandardMaterial color="#FFFACD" />
        </Box>
      </group>

      {/* ========== 悬停效果 ========== */}
      
      {/* 姓名显示 */}
      {hovered && (
        <group position={[0, 1.6 + sittingOffset, 0]}>
          <Text
            fontSize={0.12}
            color={colorScheme.accent}
            anchorX="center"
            anchorY="middle"
            castShadow
          >
            {profile.name}
          </Text>
          <Text
            position={[0, -0.16, 0]}
            fontSize={0.08}
            color="#4A5568"
            anchorX="center"
            anchorY="middle"
          >
            {profile.age}岁 • {profile.occupation}
          </Text>
        </group>
      )}

      {/* 发光效果 */}
      {hovered && (
        <Sphere position={[0, 0.6 + sittingOffset, 0]} args={[1.2]}>
          <meshLambertMaterial
            color={colorScheme.accent}
            transparent
            opacity={0.08}
            side={THREE.BackSide}
          />
        </Sphere>
      )}

      {/* 点击特效 */}
      {clicked && (
        <>
          {Array.from({ length: 8 }, (_, i) => (
            <Text
              key={i}
              position={[
                (Math.random() - 0.5) * 2,
                0.8 + Math.random() * 0.8 + sittingOffset,
                (Math.random() - 0.5) * 2
              ]}
              fontSize={0.15}
              color={colorScheme.accent}
              anchorX="center"
              anchorY="middle"
            >
              💙
            </Text>
          ))}
        </>
      )}
    </group>
  );
};